<template>
  <div id="cornerComment" v-if="dialogVisible">
    <div class="cornerComment-in">
      <div class="cornerComment-in-title">
        <span>实时区角-学生点评</span>
        <span class="el-icon-circle-close close-Btn-line" @click="closePOpup"></span>
      </div>
      <div class="commentBody" ref="dialogBox">
        <div class="corner-a" :style="{height: boxHeight+'px'}">
          <div class="corner-student">
            <div class="corner-student-list" v-for="item in new_studentList" :key="item.student_id"
                 :style="{width: div_box_width+'px'}">
              <div class="corner-student-list-in" :style="{width: img_width+'px'}"
                   @click="getStudentFn(item.student_id)">
                <div class="corner-student-list-postion"
                     :style="{height: (img_height+22)+'px',width: (img_width+2)+'px'}">
                  <div class="corner-student-list-img">
                    <div class="student-img-box"
                         :style="{background: 'url('+item.pic+')',backgroundRepeat: 'no-repeat',backgroundSize:'cover',backgroundPosition:'center', height: img_height+'px',width: img_width+'px'}">
                    </div>
                    <!-- in-color正常 lose-color失约 leave-coloe离去 not-color未预约-->
                    <!-- // 0离去1在线2未约3失约 getStudentStatus-->
                    <div class="student-status-title"
                         :class="item.cornerStatus==3?'lose-color':(item.cornerStatus==0?'leave-color':(item.cornerStatus==1?'in-color':''))">
                      <span v-if="item.cornerStatus==1">正常</span>
                      <span v-if="item.cornerStatus==3">失约</span>
                      <span v-if="item.cornerStatus==0">离去</span>
                    </div>
                  </div>
                  <div class="corner-student-list-evaluate"
                       :style="{height: (img_height+22)+'px',width: (img_width+2)+'px'}"
                       v-show="checkStudent.indexOf(item.student_id)!==-1">
                    <div class="corner-list-icon">
                      <i class="iconfont iconqueren-zhengque"></i>
                    </div>
                  </div>
                </div>
                <div class="corner-student-list-name">
                  <p>{{ item.student.name }}</p>
                  <p>{{ item.classes.class_name }}</p>
                </div>
              </div>
            </div>
          </div>
          <div class="corner-content-box" v-if="fraction.length">
            <div class="corner-content-box-list" v-for="(item,index) in fraction" :key="item.id">
              <div class="corner-content-box-list-title">
                {{ index + 1 }}.{{ item.assess.title }}
              </div>
              <div class="corner-content-box-list-btn">
                <!--                activeCheck-->
                <div class="list-btn-list" :class="item.pointVal==radioItem.id?'activeCheck':''"
                     v-for="(radioItem,radioIndex) in item.fraction" :key="radioItem.id"
                     @click="getFraction(index,radioItem.id)">
                  <el-popover
                      placement="bottom-end"
                      title="描述"
                      offset="100"
                      :close-delay="0"
                      trigger="hover"
                      width="200"
                      v-if="radioItem.desc">
                    <div class="tableline">
                      {{ radioItem.desc }}
                    </div>
                    <span slot="reference" class="tablelineBtn">{{ radioItem.name }}</span>
                  </el-popover>
                  <span v-else>{{ radioItem.name }}</span>
                </div>
              </div>
            </div>
          </div>
          <div v-else class="none-data">
            未设置相关评分项,请于区角详情查看
          </div>
          <div class="study-box" v-if="educationList.length">
            <div class="study-box-title">学习品质</div>
            <div class="corner-content-box">
              <div class="corner-content-box-list" v-for="(item,index) in educationList" :key="item.id">
                <div class="corner-content-box-list-title">
                  {{ index + 1 }}.{{ item.name }}
                </div>
                <div class="corner-content-box-list-btn">
                  <!--                activeCheck-->
                  <div class="list-btn-list" :class="item.pointVal==radioIndex?'activeCheck':''"
                       v-for="(radioItem,radioIndex) in item.fraction" :key="radioIndex"
                       @click="getFractionStudy(index,radioIndex)">
                    <el-popover
                        placement="bottom-end"
                        title="描述"
                        offset="100"
                        :close-delay="0"
                        trigger="hover"
                        width="200"
                        v-if="radioItem.remark">
                      <div class="tableline">
                        {{ radioItem.remark }}
                      </div>
                      <span slot="reference" class="tablelineBtn">{{ radioItem.name }}</span>
                    </el-popover>
                    <span v-else>{{ radioItem.name }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="cornerComment-in-footer">
        <el-button @click="closePOpup" size="small">取消</el-button>
        <el-button type="primary" @click="savePointFn" size="small">确定并保存</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import field from '@/assets/imageAdmin/field.jpg'
import {qualityIndex} from '@/api/admin/acquisition'

export default {
  props: ['visible', 'studentList', 'activeDetail', 'cornerDetail', 'studentId'],
  components: {},
  data() {
    return {
      dialogVisible: false,
      field: field,
      boxHeight: 0,
      div_box_width: 0,
      img_height: 0,
      img_width: 0,
      checkStudent: [],
      new_studentList: [],
      fraction: [],
      educationList: []
    }
  },
  watch: {
    visible() {
      this.dialogVisible = this.visible
      if (this.visible) {
        let n = this;
        this.getstudyPoint()
        for (let item of this.studentList) {
          let list = this.getJson(item)
          list.cornerStatus = this.getStudentStatus(list.student_id);
          this.new_studentList.push(list);
        }
        console.log('studentId:', this.studentId)
        if (this.studentId) {
          this.checkStudent.push(this.studentId)
        }

        this.$nextTick(() => {
          n.boxHeight = n.$refs.dialogBox.offsetHeight;
          n.boxWidth = n.$refs.dialogBox.offsetWidth; // 计算单个宽度 一排 8 个
          n.div_box_width = (n.boxWidth - 20) / 14; // 一寸照片 413*295
          // 单张的宽度 n.div_box_width*.9
          let a_width = n.div_box_width * .8;
          // img_height: 0,
          n.img_width = n.div_box_width * .8
          if (a_width < 295) {
            n.img_height = (a_width / 295) * 413
          }
          if (a_width === 295) {
            n.img_height = 413
          }
          if (a_width > 295) {
            n.img_height = (295 / a_width) * 413
          }
        })
      } else {
        this.new_studentList = [];
        this.checkStudent = [];
        this.fraction = [];
      }
    }
  },
  created() {

  },
  methods: {
    // 获取学习品质
    getstudyPoint() {
      qualityIndex({p: 1}).then(res => {
        this.selectList = res.list.data
        this.getPointFn()
      })
    },
    // 初始化
    async InitFn() {
      console.log('页面请求的数据内容：', this.cornerOption)
      let option = {
        p: this.page.pageindex,
        class_id: this.cornerOption.class.id,
        corner_id: this.cornerOption.corner.id
      }
      let data = await this.$post(this.api.admin_corner_apply_list, option);
      console.log('data:', data)
      this.arryList = data.list.data
      this.page.total = data.list.total
    },
    // 获取评分规则
    async getPointFn() {
      let data = await this.$fetch(this.api.admin_corner_edit, {id: this.cornerDetail.corner_id});
      if (data.code === 0) {
        for (let n in data.vo.assess) {
          // response.vo.assess[n].fraction = JSON.parse(response.vo.assess[n].fraction)
          data.vo.assess[n].val = ''
        }
        console.log('学习品质：', this.selectList)
        console.log('详情信息：', data.vo)
        if (data.vo.study_ids) {
          let a = data.vo.study_ids.split(',')
          let b = a.map(Number)
          let newList = []
          for (let item of this.selectList) {
            if (b.indexOf(item.id) !== -1) {
              item.pointVal = 'all'
              item.fraction = JSON.parse(item.fraction)
              newList.push(JSON.parse(JSON.stringify(item)))
            }
          }
          this.educationList = JSON.parse(JSON.stringify(newList))
        }
        console.log('educationList:', this.educationList)
        this.fraction = data.vo.assess
      }
    },
    getJson(option) {
      return JSON.parse(JSON.stringify(option))
    },
    // 分页
    handleSizeChange(val) {
      this.page.pageindex = val
      this.InitFn()
    },
    // 关闭弹窗
    closePOpup() {
      this.$emit('update:visible', false)
    },
    // 判断获取学生状态
    getStudentStatus(id) {
      console.log('this.activeDetail:', this.activeDetail)
      console.log('this.id:', id)
      // 0离去1在线2未约3失约
      // activeDetail: {
      //   0: {},
      //   1: {},
      //   2: {},
      //   3: {}
      // }, // 重组区角数据内容 0离去1在线2未约3失约
      let status = 3 // 一开始未到都算失约
      for (let index in this.activeDetail) {
        if (this.activeDetail[index][id]) {
          status = index
        }
      }
      return status
    },
    getStudentFn(id) {
      if (this.checkStudent.indexOf(id) === -1) {
        this.checkStudent.push(id)
      } else {
        this.checkStudent.splice(this.checkStudent.indexOf(id), 1)
      }
    },
    getFractionStudy(line, index) {
      let option = this.getJson(this.educationList[line])
      option.pointVal = index
      this.$set(this.educationList, line, option)
    },
    getFraction(index, id) {
      let option = this.getJson(this.fraction[index])
      option.pointVal = id
      this.$set(this.fraction, index, option)
    },
    // 提交评价
    async savePointFn() {
      if (!this.checkStudent.length) {
        this.$message.error('请选择点评学生')
        return
      }

      let list = [];
      for (let item of this.fraction) {
        if (item.pointVal) {
          let a = {};
          a.items_id = item.items_id;
          a.domain_ids = item.domain_ids;
          a.name = item.assess.name;
          for (let point of item.fraction) {
            if (point.id === item.pointVal) {
              a.evaluate_id = point.id;
              a.evaluate = point.name;
              a.score = point.score;
            }
          }
          list.push(a)
        }
      }
      if (!list.length) {
        this.$message.error('至少需一项评分')
        return
      }
      let study_ = []
      if(this.educationList.length){
        for (let item of this.educationList) {
          if (item.pointVal !== 'all') {
            let study_list = {}
            study_list.name = item.name
            study_list.study_id = item.id
            study_list.score = item.fraction[item.pointVal].score
            study_list.evaluate = item.fraction[item.pointVal].name
            study_.push(study_list)
          } else {
            this.$message.error('请选择学习品质项')
            return
          }
        }
      }
      let optionData = {
        corner_id: this.cornerDetail.corner_id,
        list: JSON.stringify(list),
        student_id: this.checkStudent.join(','),
        study_list: this.educationList.length?JSON.stringify(study_):''
      }
      let data = await this.$post(this.api.corner.comment.add, optionData);
      if (!data.code) {
        for (let i in this.fraction) {
          let option = this.getJson(this.fraction[i])
          option.pointVal = ''
          this.$set(this.fraction, i, option)
        }``
        this.checkStudent = []
        for (let i in this.educationList) {
          let option_ = JSON.parse(JSON.stringify(this.educationList[i]))
          option_.pointVal = 'all'
          this.$set(this.educationList, i, option_)
        }
        this.$message.success('提交成功！')
      } else {
        this.$message.error('提交失败！')
      }
    }
  },
  mounted() {

  }
}
</script>
<style scoped>
#cornerComment {
  height: 100vh;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9;
}

.cornerComment-in {
  width: 88%;
  height: 88%;
  background: #fff;
  display: flex;
  flex-direction: column;
  border-radius: 5px;
}

.cornerComment-in-title {
  height: 50px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ddd;
  font-size: 24px;
}

.cornerComment-in-title span {
  padding: 0 10px;
}

.cornerComment-in-title span:first-child {
  flex: 1;
  font-size: 16px;
}

.cornerComment-in-footer {
  height: 50px;
  border-top: 1px solid #ddd;
  display: flex;
  align-items: center;
  padding: 0 10px;
  justify-content: center;
}

.commentBody {
  /*padding: 0 10px;*/
  flex: 1;
  overflow-y: auto;
}

.close-Btn-line {
  cursor: pointer;
}

.corner-a {
}


.corner-student {
  overflow-y: auto;
  padding-left: 10px;
}

.corner-student-list {
  float: left;
  margin-bottom: 10px;
  margin-top: 10px;
}

.corner-student-list-in {
  cursor: pointer;
}

.corner-student-list-in:hover .corner-student-list-postion {
  box-shadow: 0 0 4px #1b8de5;
}

.corner-student-list-postion {
  position: relative;
  border: 1px solid #ddd;
}

.corner-student-list-img {
  position: absolute;
}


.corner-student-list-evaluate {
  width: 100%;
  height: 100%;
  position: absolute;
  background: rgba(46, 106, 162, 0.6);
  color: #fff;
}

.corner-list-icon {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.corner-student-list-evaluate i {
  font-size: 34px;
  margin: 0;
}

.student-status-title {
  height: 20px;
  text-align: center;
  color: #fff;
}

.corner-student-list-name {
  text-align: center;
}

.corner-student-list-name p:first-child {
  padding-top: 5px;
  font-size: 16px;
}

.corner-student-list-name p:last-child {
  font-size: 12px;
  color: #999;
}

.in-color {
  background: #1b8de5;
}

.lose-color {
  background: #ef6f14;
}

.leave-color {
  background: #444;
}

.not-color {
  background: #e28fad;
}

.not-apply-box {
  overflow-y: auto;
  padding-left: 10px;
}

.leaveUser {
  opacity: .4;
}

.corner-content-box {
  padding: 30px;
}

.corner-content-box-list {
  display: flex;
  align-items: center;
  padding: 10px 0;
}

.corner-content-box-list-title {
  width: 240px;
  font-size: 20px;
}

.corner-content-box-list-btn {
  display: flex;
  align-items: center;
}

.list-btn-list {
  height: 46px;
  width: 100px;
  border-radius: 10px;
  border: 1px solid #999;
  line-height: 44px;
  text-align: center;
  margin-right: 20px;
  color: #999;
  font-size: 16px;
  cursor: pointer;
}

.activeCheck {
  color: #fff;
  border: 1px solid #1b8de5;
  background: #1b8de5;
  font-weight: bold;
}

.activeCheck .tablelineBtn {
  color: #fff;
}

.tablelineBtn {
  color: #999;
}

.none-data {
  text-align: center;
  padding: 80px 0;
  font-size: 20px;
  color: #999;
}

.study-box-title {
  font-size: 20px;
  font-weight: bold;
  color: black;
  text-align: center;
  padding: 20px;
}
</style>

